<template>
  <div class="box">
    <div class="top">
      <span class="active" @click="funa()" ref="p1">时间线</span>

      <span @click="funb()" ref="p2">账号</span>
    </div>

    <div class="buttom">
      <div class="block" v-if="bool">
        <el-timeline>
          <el-timeline-item timestamp="2018/4/3" placement="top">
            <el-card>
              <h5>最后活动时间</h5>
              <p>老师在校考系统中最后活动了</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item timestamp="2018/4/2" placement="top">
            <el-card>
              <h5>加入时间</h5>
              <p>老师加入了校考系统</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>

      <div class="buttom2" v-else>
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="真实姓名">
            <el-input
              v-model="formLabelAlign.name"
              :placeholder="formLabelAlign.defaultname"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input v-model="formLabelAlign.telphon"></el-input>
          </el-form-item>

          <el-button type="primary" @click="genxin()">更新</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import prompt from "@/layout/index.js";
export default {
  data() {
    return {
      bool: true,
      // 账号引入的数据
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        telphon: "",
        defaultname: "老师",
      },
    };
  },
  methods: {
    // 时间线函数
    funa() {
      this.bool = true;
      this.$refs.p2.classList.remove("active");
      this.$refs.p1.classList.add("active");
    },
    // 账号函数
    funb() {
      this.bool = false;
      this.$refs.p1.classList.remove("active");
      this.$refs.p2.classList.add("active");
    },
    // 点击更新

    genxin() {
      if (!this.formLabelAlign.telphon) {
        prompt.promptBox("【phone:不能为空】", "error");
      } else {
        prompt.promptBox("成功", "success");
        this.formLabelAlign.name == ""
          ? window.sessionStorage.setItem(
              "uname",
              this.formLabelAlign.defaultname
            )
          : window.sessionStorage.setItem("uname", this.formLabelAlign.name);
      }
    },
  },
};
</script>

<style scoped>
/* 头部样式 */
.top {
  width: 95%;
  height: 29px;
  padding-top: 23px;
  margin: 0 auto;
  border-bottom: 1px solid #ccc;
}
.top > span {
  display: inline-block;
  font-size: 14px;
  padding-bottom: 8px;
  margin-right: 15px;
}
.top > span:hover {
  color: rgb(63, 97, 233);
}

.active {
  color: rgb(63, 97, 233);
  border-bottom: 2px solid rgb(63, 97, 233);
}
/* 内容样式 */
/* 时间线内容 */
.el-timeline {
  margin: 20px;
  padding-bottom: 10px;
}
.el-timeline .el-timeline-item .el-card p {
  margin-top: 20px;
  font-size: 14px;
}

/* 账号内容 */
.buttom {
  margin: 20px;
  padding-bottom: 30px;
}
</style>
